<template>
  <div class="me">
    <div class="login_top">
      <div class="user_login" v-if="falg">
        <van-nav-bar
          title="个人中心"
          left-arrow
          @click-left="$router.back()"
          @click-right="onClickRight"
        />
        <a href="/regist">注册</a>
        <span>|</span>
        <a href="/login">登录</a>
      </div>
      <div class="user_login" v-if="!falg">
        <van-nav-bar
          title="个人中心"
          left-arrow
          right-text="退出"
          @click-left="$router.back()"
          @click-right="onClickRight"
        />
        <div class="user_img">
          <van-image
            round
            width="5rem"
            height="5rem"
            @click="$router.push('/meaccount')"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="users_box">
            <a class="users_box_a" href="/meaccount">
              <span>{{user}}</span>
            </a>
            <a class="users_box_a1" href="/meaccount">
              <van-tag round plain color="#f2826a">我的账户></van-tag>
            </a>
          </div>
        </div>
        <!-- <a href="/regist">注册</a>
        <span>|</span>
        <a href="/login">登录</a>-->
      </div>
    </div>
    <div class="login_center">
      <van-cell-group>
        <a href="/order">
          <van-cell title="我的订单" value="全部订单" />
        </a>
        <van-grid :border="false">
          <a href="/order">
            <van-grid-item class="iconfont icon-qianbao icons" text="待付款" />
          </a>
          <a href="/order">
            <van-grid-item class="iconfont icon-huitu icons" text="待成团" />
          </a>
          <a href="/order">
            <van-grid-item class="iconfont icon-daichengtuan icons" text="待收货" />
          </a>
          <a href="/order">
            <van-grid-item class="iconfont icon-tn-daishouhuo icons" text="退款/售后" />
          </a>
        </van-grid>
      </van-cell-group>
    </div>
    <div class="me_cell">
      <van-cell title="我的优惠券" />
      <van-cell title="我的收藏" />
      <van-cell title="我的拼团" />
      <van-cell title="我的免单券" value="0" />
      <van-cell v-if="trues" title="余额" value="0.00" />
    </div>
    <div class="me_cell me_bottom">
      <van-cell title="客服中心" />
      <van-cell title="关于卷皮" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      trues: false,
      falg: false,
      user: localStorage.getItem("username")
    };
  },
  created() {
    sessionStorage.setItem('h-title', '个人中心')
    let token = localStorage.getItem("token");
    if (token === null) {
      this.trues = false;
      this.falg = true;
    } else {
      this.trues = true;
      this.falg = false;
    }
  },
  methods: {
    onClickRight() {
      localStorage.removeItem("token", "username");
      localStorage.removeItem("username");
      location.reload();
    }
  }
};
</script>
<style lang="less">
.me {
  background: #f4f4f8;
  .login_top {
    .van-nav-bar {
      background-image: url("https://jp.juancdn.com/jpwebapp_v1/images_v1/user/user_center_bg.png");
      background-position: top;
      background-repeat: no-repeat;
      background-size: 100% auto;
      border-bottom: none;
      display: inline;
      .van-ellipsis {
        color: white;
      }
      .van-icon {
        color: white;
      }
      .van-nav-bar__text {
        color: white;
      }
    }
    .user_login {
      background-image: url("https://jp.juancdn.com/jpwebapp_v1/images_v1/user/user_center_bg.png");
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: 100% auto;
      border-bottom: none;
      line-height: 80px;
      color: white;
      text-align: center;
      .van-nav-bar__left {
        // left: 16px;
        position: absolute;
        top: 0px;
        left: -175px;
      }
      .van-nav-bar__right {
        position: absolute;
        font-size: 14px;
        top: 0px;
        // bottom: 0px;
        // display: inline-block;
        color: none;
        width: 30px;
        margin-right: -180px;
      }
      a {
        list-style: none;
        color: white;
        margin: 0px 25px 0px 25px;
        font-size: 20px;
      }
      .user_img {
        position: relative;
        height: 100px;
        .users_box {
          float: left;
          width: 100%;
          height: 100%;
          position: relative;
          .users_box_a {
            position: absolute;
            top: 0px;
            left: 85px;
          }
          .users_box_a1 {
            position: absolute;
            top: 20px;
            left: 85px;
          }
        }
        .van-image {
          position: absolute;
          left: 25px;
        }
      }
    }
  }
  .login_center {
    .van-grid-item {
      width: 50px;
      margin: 20px;
      line-height: 15px;
      span {
        margin-left: -20px;
      }
    }
    .iconfont {
      font-size: 30px;
      color: black;
      margin: 20px 0px 0px 40px;
    }
  }
  .me_cell {
    .van-cell {
      line-height: 30px;
    }
    margin-top: 10px;
  }
  .me_bottom {
    min-height: 100px;
    margin-bottom: 90px;
  }
}
</style>